import * as React from 'react';
import { useState, useEffect, useRef } from 'react';
import { useAnalysisLog, analysisItem } from '../../hook/analysisLog';
import { FormatLog } from '../../hook/common';
import * as echarts from 'echarts';
import { getAppEchartsConfig, getPlatformEchartsConfig, getWebviewEchartsConfig, getISPEchartsConfig, getMapEchatsConfig, getNetTypeEchartsConfig, getFromEchartsConfig, getVersionEchartsConfig } from './process-echarts-config';
import echartTheme from '../../common/data/echarts-theme';
import chinaMap from '../../common/data/china';
import Chart from '../chart';
import './index.less';
import { Type } from '../logTable/index';

echarts.registerTheme('westeros', echartTheme);
echarts.registerMap('china', chinaMap);

interface LogTableProps {
    logs: FormatLog[],
    showList: Type[]
}


export function DataTreeList(map: analysisItem) {
    return Object.keys(map).map((key) => {
        const item = map[key];
        const {
            count,
            percentage,
            subItem
        } = item;

        return (
            <div key={key}>
                {key}数量：{count}，百分比{(percentage * 100).toFixed(2)}%
                {
                    subItem ? DataTreeList(subItem) : null
                }
            </div>
        )
    });
}

export default function AnalysisPanel(props: LogTableProps) {
    const {
        logs,
        showList
    } = props;

    const analysisResult = useAnalysisLog(logs);


    const getConfig = (type: Type) => {
        switch (type) {
            case Type.APP:
                return getAppEchartsConfig(analysisResult.appData);
            case Type.NETTYPE:
                return getNetTypeEchartsConfig(analysisResult.netTypeData);
            case Type.FROM:
                return getFromEchartsConfig(analysisResult.fromData);
            case Type.ISP:
                return getISPEchartsConfig(analysisResult.ispData);
            case Type.MAP:
                return getMapEchatsConfig(analysisResult.mapData);
            case Type.PLATEFORM:
                return getPlatformEchartsConfig(analysisResult.platformData);
            case Type.WEBVIEW:
                return getWebviewEchartsConfig(analysisResult.webviewData);
            case Type.VERSION:
                return getVersionEchartsConfig(analysisResult.versionData);
        }
    }

    return (
        <div className="analysispanel">
            {showList.map( (type: Type) => {
                return (
                    <div className="chart-wrapper" key={type.toString()}>
                        <Chart option={getConfig(type)}></Chart>
                    </div>
                )
            })}
        </div>
    )
}